<template>
    <div class="ex-scroll" v-infinite-scroll="_getMore" infinite-scroll-disabled="disableScroll" infinite-scroll-immediate="true" infinite-scroll-distance="distance">
      <slot name="content" :list="renderList"></slot>
      <slot name="footer" :noMore="noMore"></slot>
    </div>
</template>

<script>
    export default {
      name: "ex-infinite-scroll",
      data(){
        return{
          page:1,
          totalPage:1,
          loading:false,
          list:[],
          renderList:[],
          params:{},
          beforeRender:''
        }
      },
      props:{
        size:{
          default:function(){
            return 5
          },
          type:Number
        },
        disabled:{
          default:function(){
            return false;
          },
          type:Boolean
        },
        url:{
          default:function(){
            return '';
          },
          type:String
        },
        distance:{
          default:function(){
            return 50
          },
          type:Number
        }
      },
      computed: {
        disableScroll() {
          return this.disabled || this.noMore || this.loading
        },
        noMore () {
          return this.page >= this.totalPage
        },
      },
      methods: {
        init(params, beforeRender){
          this.page = 1
          this.params = params
          this.list = []
          this.totalPage = 1
          this.beforeRender = beforeRender
        },
        _getMore(){
          this.page ++
          this.getData()
        },
        async getData (params, beforeRender) {
          this.loading = true
          if(params) this.init(params, beforeRender)
          let postParams = Object.assign({page: this.page, limit: this.size}, this.params)
          let {list, totalPage} = await this.$httpN.postB(this.url, postParams);
          this.list = this.list.concat(list)
          if(this.beforeRender){
            this.renderList = this.beforeRender(this.list)
          }else{
            this.renderList = this.list
          }
          this.totalPage = totalPage
          this.loading = false
        },
      }
    }
</script>

<style lang="scss">
  .ex-scroll::-webkit-scrollbar {
    width: 0px;
    height: 0px;
  }
</style>
